<template>
  <div class="showClause">
    <div class="after-bottom-bdr">
      <a :href="'/controller/fileCorrelation/pdfPreview?fileName='+ pid +'.pdf'" :title="pName" class="terms-link assert-r">
        <h4>条款原文</h4>
        <p>{{pName}}</p>
      </a>
    </div>
    <div class="preview">
      <div class="hd">保险责任预览</div>
      <div class="bd after-bdr">
        <img :src="'controller/fileCorrelation/imageDownload?fileName=' + pid + '.jpg'">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'showClause',
  data () {
    return {
      pName: '',
      pid: ''
    }
  },
  mounted () {
    document.getElementsByTagName('body')[0].style.padding = '0'
    document.getElementsByTagName('body')[0].style.backgroundColor = '#ffffff'
    this.pName = this.$route.query.pName
    if (this.pName === '鼎诚鼎康保定期重大疾病保险(A款)') {
      this.pid = 'P0016'
    } else if (this.pName === '鼎诚鼎康保定期重大疾病保险(B款)') {
      this.pid = 'P0018'
    } else {
      this.pid = this.$route.query.pid
    }
  }
}
</script>

<style scoped>
  .after-bottom-bdr, .after-right-bdr {
    position: relative;
  }
  div {
    max-height: 999999px;
  }
  a:active, a:hover {
    outline: 0;
  }
  .terms-link {
    display: block;
    padding: 15px 35px 15px 15px;
    background-color: #fff;
  }
  .assert-b, .assert-l, .assert-r, .assert-t {
    position: relative;
  }
  :link, :visited {
    text-decoration: none;
  }
  a {
    -webkit-tap-highlight-color: transparent;
  }
  .terms-link h4 {
    margin-bottom: 8px;
    font-size: 15px;
    color: #666;
    line-height: 1.5;
  }
  .terms-link p {
    font-size: 13px;
    color: #999;
  }
  .terms-link.assert-r:after {
    right: 18px;
  }
  .assert-r:after {
    border-width: 1px 1px 0 0;
  }
  .assert-b:after, .assert-l:after, .assert-r:after, .assert-t:after {
    z-index: 1;
    position: absolute;
    top: 50%;
    right: 3px;
    width: 10px;
    height: 10px;
    margin-top: -8px;
    border-style: solid;
    border-color: #717171;
    content: "";
    font-size: 0;
    -webkit-transform: matrix(.71,.71,-.71,.71,0,0);
    transform: matrix(.71,.71,-.71,.71,0,0);
  }
  *, :after, :before {
    box-sizing: border-box;
  }
  .after-bottom-bdr:after {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
  }
  .after-bottom-bdr:after, .after-right-bdr:after {
    content: "";
    pointer-events: none;
    position: absolute;
    background: #e5e5e5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
  .preview {
    padding: 0 15px 20px;
    background-color: #fff;
  }
  .preview .hd {
    font-size: 15px;
    padding: 17px 0;
  }
  .after-bdr {
    position: relative;
    border: none;
  }
  .preview .bd img {
    z-index: 1;
    position: relative;
    width: 100%;
    vertical-align: middle;
  }
  fieldset, img {
    border: none;
  }
  .after-bdr:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    transform: scale(.5);
    transform-origin: left top;
  }
</style>
